<script setup lang='ts'>
import {ref, onMounted} from 'vue'
import QRCode from 'qrcode';
import logoImage from "@/assets/imgs/wsl.webp"

const props=withDefaults(defineProps<{
  width?: number
  height?: number
  url?:string
  logo?:any
}>(),{
  url:'https://www.weibo.com/silencew?is_all=1',
  logo:logoImage,
  width: 200,
  height: 200,
})


const qrCodeContainer = ref(null);

onMounted(() => {
      generateQRCode();
})

const generateQRCode = async () => {
      const canvas = await QRCode.toCanvas(qrCodeContainer.value, props.url,{
        width: props.width,
        height: props.height,
        margin: 10,
        color: 'red',
        background: 'white',
        errorCorrectionLevel: 'H',
      });
      const context = canvas.getContext('2d');
      const image = new Image();
      image.src = props.logo;
      image.onload = () => {
        const imageWidth = 50; // 图片的宽度
        const imageHeight = 50; // 图片的高度
        const x = (canvas.width - imageWidth) / 2; // 图片在二维码上的水平位置
        const y = (canvas.height - imageHeight) / 2; // 图片在二维码上的垂直位置

        context.drawImage(image, x, y, imageWidth, imageHeight);
      };
}

/* 
qrcode库提供了一些选项来自定义生成的二维码。以下是一些常用的选项：

width：指定生成的二维码的宽度，默认为 256。
height：指定生成的二维码的高度，默认为 256。
margin：指定二维码周围的白边的宽度，默认为 4。
color：指定二维码的颜色，可以是一个CSS颜色值，默认为 "black"。
background：指定二维码的背景色，可以是一个CSS颜色值，默认为 "white"。
errorCorrectionLevel：指定二维码的容错级别。可选值包括 "L"、"M"、"Q"和"H"，其中"L"表示低容错级别，"H"表示高容错级别，默认为 "M"。
使用这些选项，你可以根据需要自定义生成的二维码的外观和功能。
*/
</script>

<template>
<div>
  <canvas ref="qrCodeContainer"></canvas>
</div>
</template>

<style scoped>

</style>